<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <span>订单分享（只读）</span>

      </div>
      <el-table :data="rows" size="small" border style="width: 100%" v-loading="loading">
        <el-table-column prop="orderNo" label="订单号" width="160" show-overflow-tooltip />
        <el-table-column prop="orderTitle" label="订单标题" width="240" show-overflow-tooltip />
        <el-table-column prop="orderTaskName" label="任务类型" width="140" />
        <el-table-column prop="techType" label="程序类型" width="140" />
        <el-table-column prop="estimatedEndTime" label="截止时间" width="160">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.estimatedEndTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="需求图" width="120" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.demandUrl">
              <el-image v-for="(image, index) in scope.row.demandUrl.split(',').slice(0, 1)"
                :key="index" :src="image" :preview-src-list="scope.row.demandUrl.split(',')"
                fit="cover"
                style="width: 30px; height: 30px; margin: 2px; border-radius: 4px; cursor: pointer;">
              </el-image>
              <span v-if="scope.row.demandUrl.split(',').length > 1"
                style="font-size: 12px; color: #909399;">
                +{{ scope.row.demandUrl.split(',').length - 1 }}
              </span>
            </div>
            <span v-else style="color: #C0C4CC;">暂无图片</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人" width="120" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-user"
              @click="handleViewContact(scope.row)"
            >{{ scope.row.customerName || '查看' }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-upload"
              @click="handleFiles(scope.row)"
            >查看文件</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-if="!loading && rows.length === 0" description="暂无数据" />
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="fetchData"
      />
    </el-card>



    <!-- 文件列表对话框 -->
    <el-dialog :title="fileViewerTitle" :visible.sync="fileViewerOpen" width="600px" append-to-body>
      <el-tabs value="requirements">
        <el-tab-pane label="需求文档" name="requirements">
          <div v-if="requirementFiles.length > 0" class="file-list-panel">
            <ul>
              <li v-for="file in requirementFiles" :key="file.url">
                <a :href="file.url" target="_blank" class="file-link">
                  <i class="el-icon-document"></i>
                  <span>{{ file.name }}</span>
                  <i class="el-icon-download file-download-icon"></i>
                </a>
              </li>
            </ul>
          </div>
          <el-empty v-else description="暂无需求文档"></el-empty>
        </el-tab-pane>
        <el-tab-pane label="订单附件" name="attachments">
          <div v-if="attachmentFiles.length > 0" class="file-list-panel">
            <li v-for="file in attachmentFiles" :key="file.url">
              <a :href="file.url" target="_blank" class="file-link">
                <i class="el-icon-folder-opened"></i>
                <span>{{ file.name }}</span>
                <i class="el-icon-download file-download-icon"></i>
              </a>
            </li>
          </div>
          <el-empty v-else description="暂无订单附件"></el-empty>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fileViewerOpen = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 联系人二维码对话框 -->
    <el-dialog title="联系客服" :visible.sync="contactDialogOpen" width="400px" append-to-body center>
      <div class="contact-qr-panel">
        <div v-if="contactInfo" class="qr-code-section">
          <img 
            :src="contactInfo" 
            alt="联系客服二维码" 
            class="contact-qr-code"
            @load="onImageLoad"
            @error="onImageError"
          >
          <p class="qr-tip">扫描二维码联系客服</p>
        </div>
        <el-empty v-else description="暂无二维码信息"></el-empty>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="contactDialogOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.file-list-panel ul {
  list-style-type: none;
  padding: 0;
}

.file-list-panel li {
  margin-bottom: 10px;
}

.file-link {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #f5f7fa;
  text-decoration: none;
  color: #303133;
  transition: all 0.2s ease-in-out;
  font-size: 14px;
}

.file-link:hover {
  background-color: #ecf5ff;
  color: #409eff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.file-link i {
  margin-right: 10px;
  font-size: 18px;
}

.file-link span {
  flex-grow: 1;
}

.file-download-icon {
  margin-left: 10px;
  margin-right: 0 !important;
  color: #c0c4cc;
}

.contact-qr-panel {
  text-align: center;
  padding: 20px 0;
}

.qr-code-section {
  margin-bottom: 20px;
}

.contact-qr-code {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qr-tip {
  margin-top: 15px;
  color: #606266;
  font-size: 14px;
}
</style>

<script>
import { wechatTaskList } from '@/api/dashboard/grab'
import { parseTime } from '@/utils/ruoyi'
import { listOrderRequirements, listOrderAttachments } from '@/api/dashboard/grab'
import request from '@/utils/request'

export default {
  name: 'OrdersShare',
  data() {
    return {
      loading: true,
      rows: [],
      total: 0,
      queryParams: { pageNum: 1, pageSize: 10 },
      // 文件查看相关
      fileViewerOpen: false,
      fileViewerTitle: "",
      currentOrderId: null,
      requirementFiles: [],
      attachmentFiles: [],
      // 联系人信息相关
      contactDialogOpen: false,
      contactInfo: null,

    }
  },
  methods: {
    parseTime,
    async fetchData() {
      try {
        this.loading = true
        const res = await wechatTaskList(this.queryParams)
        this.rows = res.rows || []
        this.total = res.total || 0
      } catch (e) {
        this.rows = []
        this.total = 0
      } finally {
        this.loading = false
      }
    },
    
    // 查看文件
    handleFiles(row) {
      this.currentOrderId = row.gradOrdersId;
      this.fileViewerTitle = "查看文件 - " + row.orderNo;
      this.fileViewerOpen = true;
      this.requirementFiles = [];
      this.attachmentFiles = [];
      this.getFileLists();
    },
    
    // 获取文件列表
    getFileLists() {
      // 获取需求文档列表
      listOrderRequirements(this.currentOrderId).then(response => {
        if (response.code === 200) {
          this.requirementFiles = response.data;
        }
      });

      // 获取附件列表
      listOrderAttachments(this.currentOrderId).then(response => {
        if (response.code === 200) {
          this.attachmentFiles = response.data;
        }
      });
    },
    
    // 查看联系客服二维码
    handleViewContact(row) {
      console.log('handleViewContact 被调用', row); // 调试信息
      
      // 设置当前订单ID
      this.currentOrderId = row.gradOrdersId;
      console.log('当前订单ID:', this.currentOrderId); // 调试信息
      
      // 调用接口获取联系客服二维码
      request.get(`/dashboard/orders/getUserCodeByOrdersId/${this.currentOrderId}`).then(response => {
        console.log('完整接口响应:', response); // 调试信息
        
        // 接口直接返回图片URL字符串，不是对象
        if (response) {
          this.contactInfo = response;
          console.log('设置的图片地址:', this.contactInfo); // 调试图片地址
        } else {
          this.contactInfo = null;
        }
        this.contactDialogOpen = true;
      }).catch(error => {
        console.error('获取联系客服二维码失败:', error);
        this.$message.error('获取联系客服二维码失败');
        this.contactInfo = null;
        this.contactDialogOpen = true;
      });
    },
    
    // 图片加载成功
    onImageLoad() {
      console.log('二维码图片加载成功');
    },
    
    // 图片加载失败
    onImageError() {
      console.error('二维码图片加载失败');
      this.$message.error('二维码图片加载失败，请检查图片地址');
    }
  },
  created() {
    this.fetchData()
  }
}
</script>
 